import React from 'react'
import Header from '../../components/Headers/Headers'

//配置二级路由
import {Switch,Route,Redirect, NavLink} from 'react-router-dom'
let Mall = React.lazy(()=>import("../Mall/Mall"))
let Cate = React.lazy(()=>import("../Cate/Cate"))
let Shop = React.lazy(()=>import("../Shop/Shop"))
let Mine = React.lazy(()=>import("../Mine/Mine"))

let title="商城"
let changeTitle = (a)=>{title = a}
export default function Index(props) {
    return (
        <div>
            <Header {...props} title={title}></Header>

            <Switch>
                <Route path="/index/mall" component={Mall}></Route>
                <Route path="/index/cate" component={Cate}></Route>
                <Route path="/index/shop" component={Shop}></Route>
                <Route path="/index/mine" component={Mine}></Route>
                <Redirect to="/index/mall"></Redirect>
            </Switch>

            {/* 底部导航 */}
            <footer className="index_footer">
                <NavLink to="/index/mall" activeStyle={{color:"#FF6040"}} onClick={()=>changeTitle("商城")}>商城</NavLink>
                <NavLink to="/index/cate" activeStyle={{color:"#FF6040"}} onClick={()=>changeTitle("商品分类")}>分类</NavLink>
                <NavLink to="/index/shop" activeStyle={{color:"#FF6040"}} onClick={()=>changeTitle("购物车")}>购物车</NavLink>
                <NavLink to="/index/mine" activeStyle={{color:"#FF6040"}} onClick={()=>changeTitle("我的")}>我的</NavLink>
            </footer>
        </div>
    )
}
